<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>快速开始 | Map3D</title>
    <meta name="description" content="A VitePress site">
    <meta name="generator" content="VitePress v1.0.0-rc.45">
    <link rel="preload stylesheet" href="/steve-map-3d/assets/style.Dwf9A-rT.css" as="style">
    
    <script type="module" src="/steve-map-3d/assets/app.BaIE6JzO.js"></script>
    <link rel="preload" href="/steve-map-3d/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/steve-map-3d/assets/chunks/framework.DMMEUq9h.js">
    <link rel="modulepreload" href="/steve-map-3d/assets/chunks/theme.wAJN_k2S.js">
    <link rel="modulepreload" href="/steve-map-3d/assets/guide_started.md.CRNSesml.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5a923abb><!--[--><!--]--><!--[--><span tabindex="-1" data-v-a33f439b></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-a33f439b> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a923abb data-v-6344a796><div class="VPNavBar has-sidebar" data-v-6344a796 data-v-916e4afb><div class="wrapper" data-v-916e4afb><div class="container" data-v-916e4afb><div class="title" data-v-916e4afb><div class="VPNavBarTitle has-sidebar" data-v-916e4afb data-v-8963060e><a class="title" href="/steve-map-3d/" data-v-8963060e><!--[--><!--]--><!--[--><img class="VPImage logo" src="/steve-map-3d/images/planet.svg" alt data-v-85406ca0><!--]--><span data-v-8963060e>Map3D</span><!--[--><!--]--></a></div></div><div class="content" data-v-916e4afb><div class="content-body" data-v-916e4afb><!--[--><!--]--><div class="VPNavBarSearch search" data-v-916e4afb><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-916e4afb data-v-6d8f1b6c><span id="main-nav-aria-label" class="visually-hidden" data-v-6d8f1b6c>Main Navigation</span><!--[--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/Steve245270533" target="_blank" rel="noreferrer" tabindex="0" data-v-6d8f1b6c data-v-d0599bc2><!--[--><span data-v-d0599bc2>Github</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/steve-map-3d/guide/started.html" tabindex="0" data-v-6d8f1b6c data-v-d0599bc2><!--[--><span data-v-d0599bc2>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/steve-map-3d/team.html" tabindex="0" data-v-6d8f1b6c data-v-d0599bc2><!--[--><span data-v-d0599bc2>关于团队</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-916e4afb data-v-1178c75e><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-1178c75e data-v-2a7a75b9 data-v-1e2fec2f><span class="check" data-v-1e2fec2f><span class="icon" data-v-1e2fec2f><!--[--><span class="vpi-sun sun" data-v-2a7a75b9></span><span class="vpi-moon moon" data-v-2a7a75b9></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-916e4afb data-v-51befa99 data-v-94ec052a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-94ec052a><span class="vpi-more-horizontal icon" data-v-94ec052a></span></button><div class="menu" data-v-94ec052a><div class="VPMenu" data-v-94ec052a data-v-57088675><!----><!--[--><!--[--><!----><div class="group" data-v-51befa99><div class="item appearance" data-v-51befa99><p class="label" data-v-51befa99>Appearance</p><div class="appearance-action" data-v-51befa99><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-51befa99 data-v-2a7a75b9 data-v-1e2fec2f><span class="check" data-v-1e2fec2f><span class="icon" data-v-1e2fec2f><!--[--><span class="vpi-sun sun" data-v-2a7a75b9></span><span class="vpi-moon moon" data-v-2a7a75b9></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-916e4afb data-v-3ff7d219><span class="container" data-v-3ff7d219><span class="top" data-v-3ff7d219></span><span class="middle" data-v-3ff7d219></span><span class="bottom" data-v-3ff7d219></span></span></button></div></div></div></div><div class="divider" data-v-916e4afb><div class="divider-line" data-v-916e4afb></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5a923abb data-v-4f4d04f2><div class="container" data-v-4f4d04f2><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-4f4d04f2><span class="vpi-align-left menu-icon" data-v-4f4d04f2></span><span class="menu-text" data-v-4f4d04f2>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-4f4d04f2 data-v-f732bf47><button data-v-f732bf47>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5a923abb data-v-e2997bc3><div class="curtain" data-v-e2997bc3></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-e2997bc3><span class="visually-hidden" id="sidebar-aria-label" data-v-e2997bc3> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-e2997bc3><section class="VPSidebarItem level-0 has-active" data-v-e2997bc3 data-v-ccf8921b><div class="item" role="button" tabindex="0" data-v-ccf8921b><div class="indicator" data-v-ccf8921b></div><h2 class="text" data-v-ccf8921b>入门</h2><!----></div><div class="items" data-v-ccf8921b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ccf8921b data-v-ccf8921b><div class="item" data-v-ccf8921b><div class="indicator" data-v-ccf8921b></div><a class="VPLink link link" href="/steve-map-3d/guide/started.html" data-v-ccf8921b><!--[--><p class="text" data-v-ccf8921b>快速开始</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e2997bc3><section class="VPSidebarItem level-0 collapsible" data-v-e2997bc3 data-v-ccf8921b><div class="item" role="button" tabindex="0" data-v-ccf8921b><div class="indicator" data-v-ccf8921b></div><h2 class="text" data-v-ccf8921b>API</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-ccf8921b><span class="vpi-chevron-right caret-icon" data-v-ccf8921b></span></div></div><div class="items" data-v-ccf8921b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ccf8921b data-v-ccf8921b><div class="item" data-v-ccf8921b><div class="indicator" data-v-ccf8921b></div><a class="VPLink link link" href="/steve-map-3d/guide/map3d.html" data-v-ccf8921b><!--[--><p class="text" data-v-ccf8921b>Map3D</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ccf8921b data-v-ccf8921b><div class="item" data-v-ccf8921b><div class="indicator" data-v-ccf8921b></div><a class="VPLink link link" href="/steve-map-3d/guide/shapes.html" data-v-ccf8921b><!--[--><p class="text" data-v-ccf8921b>Shapes</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a923abb data-v-5ca137f5><div class="VPDoc has-sidebar has-aside" data-v-5ca137f5 data-v-6e1d01e9><!--[--><!--]--><div class="container" data-v-6e1d01e9><div class="aside" data-v-6e1d01e9><div class="aside-curtain" data-v-6e1d01e9></div><div class="aside-container" data-v-6e1d01e9><div class="aside-content" data-v-6e1d01e9><div class="VPDocAside" data-v-6e1d01e9 data-v-acd23e2a><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-acd23e2a data-v-ecf7ecca><div class="content" data-v-ecf7ecca><div class="outline-marker" data-v-ecf7ecca></div><div class="outline-title" role="heading" aria-level="2" data-v-ecf7ecca>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ecf7ecca><span class="visually-hidden" id="doc-outline-aria-label" data-v-ecf7ecca> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-ecf7ecca data-v-f301a2b1><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-acd23e2a></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6e1d01e9><div class="content-container" data-v-6e1d01e9><!--[--><!--]--><main class="main" data-v-6e1d01e9><div style="position:relative;" class="vp-doc _steve-map-3d_guide_started" data-v-6e1d01e9><div><h1 id="快速开始" tabindex="-1">快速开始 <a class="header-anchor" href="#快速开始" aria-label="Permalink to &quot;快速开始&quot;">​</a></h1><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;">​</a></h2><div class="tip custom-block github-alert"><p class="custom-block-title">TIP</p><p>由于该库基于three.js开发，需同时安装<code>@types/three</code>类型包。</p></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-tW9pr" id="tab-gwtRnpM" checked="checked"><label for="tab-gwtRnpM">npm</label><input type="radio" name="group-tW9pr" id="tab-bM3Ddci"><label for="tab-bM3Ddci">pnpm</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> steve-map-3d</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @types/three</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> steve-map-3d</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @types/three</span></span></code></pre></div></div></div><h2 id="创建第一个场景" tabindex="-1">创建第一个场景 <a class="header-anchor" href="#创建第一个场景" aria-label="Permalink to &quot;创建第一个场景&quot;">​</a></h2><h3 id="创建主容器盒子" tabindex="-1">创建主容器盒子 <a class="header-anchor" href="#创建主容器盒子" aria-label="Permalink to &quot;创建主容器盒子&quot;">​</a></h3><p>创建一个容器盒子并设置其宽高样式</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-0nDk7" id="tab-EXMRc0W" checked="checked"><label for="tab-EXMRc0W">index.html</label></div><div class="blocks"><div class="language-html vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">doctype</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;en&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;UTF-8&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;icon&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;image/svg+xml&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/vite.svg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;viewport&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Map3D&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">      *</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
<span class="line"></span>
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      #app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">vw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">vh</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;app&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;module&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/src/main.ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></div></div><h3 id="创建map3d主类" tabindex="-1">创建Map3D主类 <a class="header-anchor" href="#创建map3d主类" aria-label="Permalink to &quot;创建Map3D主类&quot;">​</a></h3><p>在<code>main.ts</code>中导入<code>Map3D</code>类，并实例化，传入<code>domElement</code>参数指定主容器盒，<code>axesHelper</code>指定坐标辅助器大小，最后调用<code>render</code>方法即可完成3D场景的基础渲染</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-KK16s" id="tab-dnDx3gw" checked="checked"><label for="tab-dnDx3gw">main.ts</label></div><div class="blocks"><div class="language-typescript vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {Map3D} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;steve-map-3d&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 实例化Map3D</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> map_3d</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Map3D</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	domElement: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#app&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 主容器盒子</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	axesHelper: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 坐标辅助器</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 调用渲染方法</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">map_3d.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">render</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div></div></div><h3 id="创建一个box盒子" tabindex="-1">创建一个Box盒子 <a class="header-anchor" href="#创建一个box盒子" aria-label="Permalink to &quot;创建一个Box盒子&quot;">​</a></h3><p>在<code>main.ts</code>中导入<code>Shapes</code>类，利用<code>Shapes.Box()</code>方法创建一个正方体盒子，并调用<code>Map3D实例对象</code>的<code>add</code>方法将其加入场景中：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-t81w8" id="tab-3PturZE" checked="checked"><label for="tab-3PturZE">main.ts</label></div><div class="blocks"><div class="language-typescript vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {Map3D, Shapes} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;steve-map-3d&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> map_3d</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Map3D</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	domElement: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#app&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	axesHelper: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">map_3d.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">render</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 创建一个Box</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> box</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Shapes.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 添加到主场景</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">map_3d.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(box)</span></span></code></pre></div></div></div><h3 id="最终效果" tabindex="-1">最终效果 <a class="header-anchor" href="#最终效果" aria-label="Permalink to &quot;最终效果&quot;">​</a></h3><p>这样，一个简单的场景就搭建完成了</p><div class="scene" data-v-83e7885b></div></div></div></main><footer class="VPDocFooter" data-v-6e1d01e9 data-v-c6742eb1><!--[--><!--]--><!----><nav class="prev-next" data-v-c6742eb1><div class="pager" data-v-c6742eb1><!----></div><div class="pager" data-v-c6742eb1><a class="VPLink link pager-link next" href="/steve-map-3d/guide/map3d.html" data-v-c6742eb1><!--[--><span class="desc" data-v-c6742eb1>Next page</span><span class="title" data-v-c6742eb1>Map3D</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a923abb data-v-d1b8d4ff><div class="container" data-v-d1b8d4ff><p class="message" data-v-d1b8d4ff>Released under the MIT License.</p><p class="copyright" data-v-d1b8d4ff>Copyright © 2024-present Steve</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"team.md\":\"CE_8gr_8\",\"guide_map3d.md\":\"BD7-dIzA\",\"index.md\":\"DobOwIb6\",\"guide_shapes.md\":\"CCy0iZ6m\",\"guide_started.md\":\"CRNSesml\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Map3D\",\"description\":\"A VitePress site\",\"base\":\"/steve-map-3d/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\"},\"logo\":\"/images/planet.svg\",\"nav\":[{\"text\":\"Github\",\"link\":\"https://github.com/Steve245270533\"},{\"text\":\"指南\",\"link\":\"/guide/started\"},{\"text\":\"关于团队\",\"link\":\"/team\"}],\"sidebar\":[{\"text\":\"入门\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/started\"}]},{\"text\":\"API\",\"collapsed\":false,\"items\":[{\"text\":\"Map3D\",\"link\":\"/guide/map3d\"},{\"text\":\"Shapes\",\"link\":\"/guide/shapes\"}]}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present Steve\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>